<template>
  <div style="width: 100%">
    <div class="d-none d-sm-none d-md-block d-lg-block">
     <div class="pc-pagination">
       <b-pagination v-show="total>10" size="md"
                     :total-rows="total"
                     v-model="currentPage"
                     :per-page="10"
       >
       </b-pagination>
     </div>
    </div>

    <div v-if="total>0" class="d-block d-sm-block d-md-none d-lg-none">
      <div class="mobile-pagination">
        <div class="left" @click="prev">
          <span>
            上一页
          </span>
        </div>
        <div class="center">
          {{currentPage}}/{{numberOfPages}}
          <!-- {{currentPage}}-->
        </div>
        <div class="right" @click="next">
          <span>
            下一页
          </span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  // require styles

  export default {
    props: ['total'],
    computed: {
      numberOfPages() {
        const result = Math.ceil(this.total / this.perPage)
        return (result < 1) ? 1 : result
      }
    },
    data() {
      return {
        currentPage: 1,
        perPage: 10,
      }
    },
    watch: {
      currentPage: function (val) {
        console.log('this.total' + this.total)
        this.$emit('change', {
          pageSize: 10,
          pageNum: val,
          total: this.total
        })
      }
    },
    components: {},
    mounted() {

    },
    methods: {
      prev() {
        console.log('prev')
        this.currentPage--
        this.changePage(this.currentPage)
      },
      next() {
        console.log('next')
        this.changePage(this.currentPage + 1)
      },
      changePage(num) {
        if (num > this.numberOfPages) {
          num = this.numberOfPages
        } else if (num < 1) {
          num = 1
        }
        console.log(num)

        this.currentPage = num
      }
    }
  }
</script>

<style lang="less" >
  @import "~assets/style/public";

  .mobile-pagination {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20/@size 0;
    > div {
      width: 33%;
      text-align: center;
      display: flex;
      align-items: center;
      span {
        display: flex;
        width: 150/@size;
        height: 60/@size;
        border: 1px solid @theme-color;
        justify-content: center;
        align-items: center;
      }
    }
    .left, .right {
      font-family: @font-first;
      span {
        font-size: @font-24;
        color: @theme-color;
      }
    }
    .center {
      justify-content: center;
      color: @black-color-0-5;
      font-size: @font-26;
    }

    .right {
      justify-content: flex-end;
    }
  }

  .pc-pagination{
    display: flex;
    justify-content: center;
    margin: 20/@size 0;
    .pagination{
      border-radius: 10/@size;
      .page-item{
        .page-link{
          padding: 10/@size 20/@size !important;
          color: @theme-color;
        }
        &.active{
          .page-link{
            background-color: @theme-color;
            border-color: @theme-color;
            color: @white-color;
          }
        }
      }
    }

  }

</style>
